<script setup>
import { getPurchaseBoardDb } from '@/api/visual/purchaseBoard.js'
import { formatMoney } from '@/utils/globalMethod'

const viewData1 = ref([])
const viewData2 = ref([])

const viewData1Count = computed(() => viewData1.value.reduce((curr, prev) => curr + Number(prev), 0))
const viewData2Count = computed(() => viewData2.value.reduce((curr, prev) => curr + Number(prev), 0))

const option = computed(() => ({
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#2b2c33'
        }
      },
      axisLabel: {
        color: '#ccc1c1'
      }
    }
  ],
  grid: {
    top: '10%',
    left: '5%',
    right: '5%',
    bottom: '15%'
  },
  series: [
    {
      name: '本期',
      itemStyle: {
        color: '#FF0000'
      },
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },

      data: viewData1.value,
      type: 'line',
      smooth: true
    },
    {
      name: '同期',
      itemStyle: {
        color: '#0066FF'
      },
      label: {
        show: true,
        color: '#fff'
      },
      emphasis: {
        focus: 'series'
      },
      data: viewData2.value,
      type: 'line',
      smooth: true
    }
  ]
}))

const loadData = async () => {
  const { data } = await getPurchaseBoardDb()

  delete data[0]['db']
  delete data[1]['db']

  viewData1.value = Object.values(data[0]).map(item => item.toFixed(2))
  viewData2.value = Object.values(data[1]).map(item => item.toFixed(2))
}

onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10>
      <div class="salesBoard7-header board-title">
        <span>
          {{ `本期为${new Date().getFullYear()}年，单位：万元，币别：RMB（本币含税金额），数据来源：采购入库单 ` }}
        </span>
        <span>
          <span class="bq">
            本期合计：
            <span>{{ formatMoney(viewData1Count) }}</span>
          </span>
          <span class="tq">
            同期合计：
            <span>{{ formatMoney(viewData2Count) }}</span>
          </span>
        </span>
      </div>

      <div class="salesBoard7-chart">
        <ps-chart2 :option="option"></ps-chart2>
      </div>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
:deep(.border-box-content) {
  display: flex;
  flex-direction: column;
}

.salesBoard7 {
  &-header {
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    .bq {
      margin-right: 20px;
    }
  }

  &-chart {
    flex: 1;
  }
}

:deep(.el-card) {
  background-color: transparent;
  border: unset;

  .el-card__body {
    padding: 0;
    // height: 100%;
  }
}
</style>
